<template>
    <div class="flow-page">
        <span class="article-title">关键词信息管理</span>
        <div class="fliter">
            <div style="display: flex;align-items: center;">
                <span style="font-size: 14px;">文章ID：</span>
                <el-input v-model="articleId" style="width:250px;margin-right: 10px;" placeholder="请输入文章ID" clearable />
                <el-button type="primary" :icon="Search" @click="getFlowData">查询</el-button>
            </div>
        </div>
        <div class="article-table">

            <el-table :data="tableData" v-loading="loading"
                :header-cell-style="{ background: '#fafafa', height: '56px', }"
                style="width: 100%;margin-top: 20px;margin-bottom: 20px; height: calc(100% - 70px);">
                <el-table-column type="expand">

                    <template #default="props">
                        <el-table :data="props.row.details"
                            :header-cell-style="{ background: '#fafafa', height: '40px', }">
                            <el-table-column label="搜索词" prop="keyword">
                                <template #header>
                                    <div style="margin-left: 50px;" min-width="120px">
                                        搜索词
                                    </div>
                                </template>
                                <template #default="scope">
                                    <div style="margin-left: 50px;"> {{ scope.row['keyword'] }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="点击数量" prop="clickCount" />
                            <el-table-column label="百分比" prop="percentage" />
                        </el-table>

                    </template>
                </el-table-column>
                <el-table-column label="日期" prop="date">
                    <template #default="scope">
                        <div>
                            <span>{{ scope.row['date'] }}</span>
                            <span style="margin-left: 20px;color: #bbb;">{{ scope.row['keywordCount'] }}条搜索词</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
                style="display: flex;justify-content: end;" layout="total,prev, pager, next,sizes" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

    </div>
</template>

<script setup lang="ts">
import { defineComponent, onActivated, ref, watch } from 'vue';
import { Search, } from '@element-plus/icons-vue'
defineComponent({ name: 'Campaign' })
import service from '../config';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
const pageNum = ref(1)
const pageSize = ref(20)
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const articleId = ref()
const route = useRoute()
const getFlowData = () => {
    loading.value = true
    service.post('/forwardRecord/page', { pageNum: pageNum.value, pageSize: pageSize.value, articleId: articleId.value })
        .then(response => {
            loading.value = false
            tableData.value = response?.data?.records
            total.value = response?.data?.total
        })
        .catch(error => {
            loading.value = false
            ElMessage.error(error)
        });
}

const handleSizeChange = () => {
    pageNum.value = 1
    getFlowData()
}

const handleCurrentChange = () => {
    getFlowData()
}

watch(() => route.query.articleId, () => {
    if (route.query?.articleId) {
        articleId.value = route.query.articleId
        getFlowData()
    }
}, { immediate: true });

onActivated(() => {
    getFlowData()
})

</script>

<style lang="scss">
.flow-page {
    background-color: #fff;
    height: calc(100% - 10px);
    padding: 30px;
    width: 100%;
    box-sizing: border-box;

    .article-title {
        font-size: 20px;
        font-weight: 600;
    }

    .fliter {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin: 30px 0;

        .filter-item {
            display: flex;
            width: 33%;
            gap: 5px;
            align-items: center;
        }
    }

    .el-button--primary {
        background-color: #1677ff;
    }

    .article-table {
        margin-top: 30px;
        height: calc(100% - 100px);
    }

    .el-drawer {
        width: 100% !important;
    }

    .el-drawer__body {
        padding: 0;
    }

    .el-table__row {
        font-size: 13px;
    }

}
</style>
